div.page{
    margin: 50px auto 50px auto;
    max-width: 500px;
    position: relative;
    text-align: left;
}

div.pinch-zoom {
    position: relative;
}
div.pinch-zoom a{
    color: white;
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-decoration: none;
    background: #333;
    padding: 3px;
    font-size: 11px;
}

div.pinch-zoom div.description {
    position: absolute;
    top: 500px;
    left: 210px;
}

div.pinch-zoom div.description h1{
    font-size: 40px;
    margin: 0px;
    margin-bottom: 10px;
}
div.pinch-zoom div.description p{
    margin: 0px;
}

ul{
    margin: 0;
    padding: 0;
}

/* Tiles */

    .tiles {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        margin: -2.5em 0 0 -2.5em;

    }

        .tiles article {
            -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
            position: relative;
            width: calc(250px);
            margin: 2.5em 0 0 2.5em;
        }

            .tiles article > .image {
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                position: relative;
                display: block;
                width: 250px;
                border-radius: 4px;
                overflow: hidden;
            }

                .tiles article > .image img {
                    display: block;
                    width: 250px;
                }

                .tiles article > .image:before {
                    pointer-events: none;
                    -moz-transition: background-color 0.5s ease, opacity 0.5s ease;
                    -webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
                    -ms-transition: background-color 0.5s ease, opacity 0.5s ease;
                    transition: background-color 0.5s ease, opacity 0.5s ease;
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 250px;
                    height: 250px;
                    opacity: 1.0;
                    z-index: 1;
                    opacity: 0.5;
                }

                .tiles article > .image:after {
                    pointer-events: none;
                    -moz-transition: opacity 0.5s ease;
                    -webkit-transition: opacity 0.5s ease;
                    -ms-transition: opacity 0.5s ease;
                    transition: opacity 0.5s ease;
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 250px;
                    height: 250px;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    opacity: 0.25;
                    z-index: 2;
                }

            .tiles article > a {
                display: -moz-flex;
                display: -webkit-flex;
                display: -ms-flex;
                display: flex;
                -moz-flex-direction: column;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -moz-align-items: center;
                -webkit-align-items: center;
                -ms-align-items: center;
                align-items: center;
                -moz-justify-content: center;
                -webkit-justify-content: center;
                -ms-justify-content: center;
                justify-content: center;
                -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
                -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
                -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
                transition: background-color 0.5s ease, transform 0.5s ease;
                position: absolute;
                top: 0;
                left: 0;
                width: 250px;
                height: 250px;
                padding: 1em;
                border-radius: 4px;
                border-bottom: 0;
                color: #ffffff;
                text-align: center;
                text-decoration: none;
                z-index: 3;
            }

                .tiles article > a > :last-child {
                    margin: 0;
                }

                .tiles article > a:hover {
                    color: #ffffff !important;
                }

                .tiles article > a h2 {
                    margin: 0;
                }

                .tiles article > a .content {
                    -moz-transition: max-height 0.5s ease, opacity 0.5s ease;
                    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
                    -ms-transition: max-height 0.5s ease, opacity 0.5s ease;
                    transition: max-height 0.5s ease, opacity 0.5s ease;
                    width: 250px;
                    max-height: 0;
                    line-height: 1.5;
                    margin-top: 0.35em;
                    opacity: 0;
                }

                    .tiles article > a .content > :last-child {
                        margin-bottom: 0;
                    }

            .tiles article.style > .image:before {
                background-color: #ffffff;
            }

            body:not(.is-touch) .tiles article:hover > .image {
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }

                body:not(.is-touch) .tiles article:hover > .image:before {
                    background-color: #333333;
                    opacity: 0.35;
                }

                body:not(.is-touch) .tiles article:hover > .image:after {
                    opacity: 0;
                }

            body:not(.is-touch) .tiles article:hover .content {
                max-height: 15em;
                opacity: 1;
            }

        * + .tiles {
            margin-top: 2em;
        }

        body.is-preload .tiles article {
            -moz-transform: scale(0.9);
            -webkit-transform: scale(0.9);
            -ms-transform: scale(0.9);
            transform: scale(0.9);
            opacity: 0;
        }

        body.is-touch .tiles article .content {
            max-height: 15em;
            opacity: 1;
        }

        @media screen and (max-width: 1280px) {

            .tiles {
                margin: -1.25em 0 0 -1.25em;
            }

                .tiles article {
                    width: calc(33.3333333333% - 1.25em);
                    margin: 1.25em 0 0 1.25em;
                }

        }

        @media screen and (max-width: 980px) {

            .tiles {
                margin: -2.5em 0 0 -2.5em;
            }

                .tiles article {
                    width: calc(50% - 2.5em);
                    margin: 2.5em 0 0 2.5em;
                }

        }

        @media screen and (max-width: 736px) {

            .tiles {
                margin: -1.25em 0 0 -1.25em;
            }

                .tiles article {
                    width: calc(50% - 1.25em);
                    margin: 1.25em 0 0 1.25em;
                }

                    .tiles article:hover > .image {
                        -moz-transform: scale(1.0);
                        -webkit-transform: scale(1.0);
                        -ms-transform: scale(1.0);
                        transform: scale(1.0);
                    }

        }

        @media screen and (max-width: 480px) {

            .tiles {
                margin: 0;
            }

                .tiles article {
                    width: 100%;
                    margin: 1.25em 0 0 0;
                }

        }
